<template>
  <div
    class="mobile-register-page flexbox flex-tb flex-center bg-center bg-no-repeat lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] z-[1] bg-cover !w-screen !h-screen"
  >
    <div class="login-header">
      <FnNav />
    </div>
    <div class="pc-login-header">
      <div class="flexbox flex-align-center flex-justify-between flex-1">
        <NuxtLink :to="localePath('/')">
          <img
            loading="lazy"
            class="logo object-cover"
            src="https://cd.sealmg.com/assets/img/logo-img.png"
            alt="SEALMG company logo"
            title="SEALMG brand logo"
          />
        </NuxtLink>
        <Langes langTheme="white2" :onlyLange="false" />
      </div>
    </div>
    <!-- <img
      loading="lazy"
      class="page-bg pc-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/login-page-bg.png"
      alt="Desktop registration background"
      title="Desktop registration page background"
    /> -->
    <!-- <img
      loading="lazy"
      class="page-bg mobile-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/mobile/login-page-bg.png"
      alt="Mobile registration background"
      title="Mobile registration page background"
    /> -->
    <div class="mode-cont password-cont">
      <div class="title">{{ $t('formTitle.setPassword') }}</div>
      <div class="item-cont-row">
        <div class="row-label">{{ $t('formItem.password') }}</div>
        <div class="row-input">
          <el-input v-model="userPassword.newpwd" :placeholder="$t('formPlaceholder.input')" :minlength="2" :maxlength="20" show-password></el-input>
        </div>
        <LazyPwdCheck ref="pwdcheck" :targetVal="userPassword.newpwd" />
      </div>
      <div class="item-cont-row">
        <div class="row-label">{{ $t('formItem.confirmPassword') }}</div>
        <div class="row-input">
          <el-input
            v-model="userPassword.newpwdAgain"
            :placeholder="$t('formPlaceholder.input')"
            :minlength="2"
            :maxlength="20"
            show-password
            @keyup.enter.native="svaePasswordForm"
          ></el-input>
        </div>
      </div>
      <div class="handle flexbox flex-align-center">
        <el-button class="theme-btn one-line" :disabled="func()" :loading="btnLoading" @click="svaePasswordForm">
          {{ $t('formBtn.register') }}
        </el-button>
      </div>
    </div>
    <base-info />
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  import FnNav from '@/components/mobile/FnNav'
  import PwdCheck from '@/components/PwdCheck'
  export default {
    name: 'mobileRegister',
    components: {
      FnNav,
      PwdCheck
    },
    data() {
      return {
        btnLoading: false,
        authorize: {
          code: ''
        },
        userPassword: {
          newpwd: '',
          newpwdAgain: ''
        },
        endTime: 0
      }
    },
    head: {
      title: 'SEALMG - register',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Mobile registration'
        }
      ]
    },
    created() {
      let query = this.$route.query
      if (query.authorize && process.client) {
        let opts = this.decodeBase64(query.authorize)
        if (opts) {
          this.authorize = JSON.parse(opts)
          if (this.authorize.time) {
            this.endTime = this.authorize.time * 1000 + 10 * 60000
          }
          if (this.endTime && this.endTime <= Date.now()) {
            this.$message({
              showClose: true,
              message: this.$t('formRule.linkTimeOut'),
              type: 'error'
            })
          }
        }
      }
    },
    methods: {
      func() {
        if (
          this.authorize.code &&
          this.userPassword.newpwd &&
          this.userPassword.newpwdAgain &&
          this.userPassword.newpwd == this.userPassword.newpwdAgain &&
          this.$refs.pwdcheck.checkRes
        ) {
          return false
        }
        return true
      },
      decodeBase64(base64String) {
        // 将Base64字符串分成每64个字符一组
        const padding = base64String.length % 4 === 0 ? 0 : 4 - (base64String.length % 4)
        base64String += '='.repeat(padding)
        // 使用atob()函数解码Base64字符串
        const binaryString = window.atob(base64String)
        // 将二进制字符串转换为TypedArray
        const bytes = new Uint8Array(binaryString.length)
        for (let i = 0; i < binaryString.length; i++) {
          bytes[i] = binaryString.charCodeAt(i)
        }
        // 将TypedArray转换为字符串
        return new TextDecoder('utf-8').decode(bytes)
      },
      svaePasswordForm: throttle(
        function () {
          if (!this.$refs.pwdcheck.checkRes || this.userPassword.newpwd != this.userPassword.newpwdAgain) {
            return
          }
          if (this.userPassword.newpwd && this.userPassword.newpwdAgain && this.authorize.username && this.authorize.email && this.authorize.code) {
            if (this.endTime && this.endTime <= Date.now()) {
              this.$message({
                showClose: true,
                message: this.$t('formRule.linkTimeOut'),
                type: 'error'
              })
              return
            }
            this.btnLoading = true
            this.$axios
              .post(
                '/api/user/register',
                {
                  username: this.authorize.username,
                  email: this.authorize.email,
                  password: this.userPassword.newpwd,
                  code: this.authorize.code
                },
                { setConfig: { showSuccessMsg: true } }
              )
              .then(res => {
                this.btnLoading = false
                this.$router.replace({
                  path: this.localePath('/login')
                })
              })
              .catch(err => {
                this.btnLoading = false
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      )
    }
  }
</script>
<style lang="less" scoped>
  .mobile-register-page {
    width: 100%;
    height: 100vh;
    position: relative;
    .login-header {
      display: none;
    }
    .pc-login-header {
      display: block;
      width: 515px;
      margin-bottom: 8px;
      .logo {
        width: 157px;
        height: 46px;
      }
    }
    .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
    }
    .pc-page-bg {
      display: block;
    }
    .mobile-page-bg {
      display: none;
    }
    .mode-cont {
      box-sizing: border-box;
      padding: 70px;
      width: 515px;
      background: @color-ff;
      box-shadow: 0px 16px 32px 0px rgba(12, 3, 0, 0.06);
      border-radius: 32px;
      .title {
        margin-bottom: 24px;
        font-weight: 600;
        font-size: 24px;
        color: @font-color-26;
      }
      .item-cont-row {
        margin-bottom: 16px;
        .row-label {
          margin-bottom: 8px;
          font-size: 12px;
          color: @font-color-99;
        }
        .row-input {
          /deep/.el-input__inner {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-14;
            height: 50px;
            line-height: 50px;
            background: @color-f7;
            border-radius: 8px;
          }
        }
      }
      .handle {
        margin-top: 32px;
        .theme-btn {
          height: 50px;
          line-height: 50px;
          font-weight: 500;
          font-size: 16px;
          color: @color-ff;
          border-radius: 24px;
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .mobile-register-page {
      display: block;
      position: relative;
      width: 768px;
      margin: 0 auto;
      min-height: 100vh;
      .login-header {
        display: block;
      }
      .pc-login-header {
        display: none;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 736px;
        left: 50%;
        transform: translateX(-50%);
      }
      .mode-cont {
        margin-top: 24px;
        box-sizing: border-box;
        padding: 24px 16px;
        width: 100%;
        box-shadow: none;
        background: transparent;
        .title {
          margin-bottom: 20px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .item-cont-row {
          margin-bottom: 16px;
          .row-label {
            margin-bottom: 8px;
            font-size: 12px;
            color: @font-color-99;
          }
          .row-input {
            /deep/.el-input__inner {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
              height: 48px;
              line-height: 48px;
              background: @color-f7;
              border-radius: 8px;
            }
          }
        }
        .handle {
          margin-top: 24px;
          .theme-btn {
            height: 48px;
            line-height: 48px;
            font-weight: 500;
            font-size: 16px;
            color: @color-ff;
            border-radius: 24px;
          }
        }
      }
      /deep/.base-info {
        margin-top: 108px;
        padding-bottom: 86px;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .mobile-register-page {
      display: block;
      position: relative;
      width: 375px;
      margin: 0 auto;
      min-height: 100vh;
      .login-header {
        display: block;
      }
      .pc-login-header {
        display: none;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 343px;
        left: 50%;
        transform: translateX(-50%);
      }
      .mode-cont {
        margin-top: 24px;
        box-sizing: border-box;
        padding: 24px 16px;
        width: 100%;
        box-shadow: none;
        background: transparent;
        .title {
          margin-bottom: 20px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .item-cont-row {
          margin-bottom: 16px;
          .row-label {
            margin-bottom: 8px;
            font-size: 12px;
            color: @font-color-99;
          }
          .row-input {
            /deep/.el-input__inner {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
              height: 48px;
              line-height: 48px;
              background: @color-f7;
              border-radius: 8px;
            }
          }
        }
        .handle {
          margin-top: 24px;
          .theme-btn {
            height: 48px;
            line-height: 48px;
            font-weight: 500;
            font-size: 16px;
            color: @color-ff;
            border-radius: 24px;
          }
        }
      }
      /deep/.base-info {
        margin-top: 108px;
        padding-bottom: 86px;
      }
    }
  }
</style>
